//字体使用
.px2px(@name, @px){
    @{name}: round(@px / 2) * 1px;
    [data-dpr="2"] & {
        @{name}: @px * 1px;
    }
    // for mx3
    [data-dpr="2.5"] & {
        @{name}: round(@px * 2.5 / 2) * 1px;
    }
    // for 小米note
    [data-dpr="2.75"] & {
        @{name}: round(@px * 2.75 / 2) * 1px;
    }
    [data-dpr="3"] & {
        @{name}: round(@px / 2 * 3) * 1px
    }
    // for 三星note4
    [data-dpr="4"] & {
        @{name}: @px * 2px;
    }
}
//普通单位转换 
//75是基准值 可以理解为设计图除以10
//rem = document.documentElement.clientWidth * dpr / 10
//例如 苹果6  375*2 / 10  = 75
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
/*         
css类型名约定  方便以开头分辨
框架css                     f- 开头
模块css                     m- 开头
按钮css                     p- 开头
公用less                   my- 开头
css部分名字简写约定
title       标题           简写为 til
content     内容           简写为 con
logo        商标           简写为 log
nav         头部导航       简写为 nav
menu        菜单           简写为 men
label       标签           简写为 lab
serch       搜索           简写为 ser
list        列表           简写为 lis
item        单个对象       简写为 ite
hint        提示           简写为 hin
status      状态           简写为 sta
wrapper     包裹层         简写为 wra
icon        图标           简写为 ico
link        连接           简写为 lin
intro       简介           简写为 intr
button      按钮           简写为 btn
message     消息           简写为 mes

页面私有css 以文件名缩写开头
Scenicspot_info.html       ssi- 开头
album.html                 alb- 开头
login.html                 log- 开头
scenicspotlist.html        ssl- 开头
personal.html              per- 开头
*/
/*
sublime 个人快捷
myless Tab   = .px2rem(@name, @px);set
*/
//---------------------less变量-----------------------------
//按钮统一使用 display:inline-block;
//主题蓝色
@main-blue:#29bcf5;
//文字颜色
@text-color:#333333;
@text-color1:#999999;
@text-color2:#666666;
//边框颜色
@border-color:#d7d7d7;
//回复评论背景色
@comment-color:#f4fcfe;

//--------------------less方法-----------------------------
//左右内边距24 方法
.padding-l-r(@px1: 0,@px2: 0){
    padding-top:@px1 / 75 * 1rem ;
    padding-right:24 / 75 * 1rem ;
    padding-bottom:@px2  / 75 * 1rem ;
    padding-left:24 / 75 * 1rem;
}
.padding-w(@px1:0,@px2:0,@px3:0,@px4:0){
    padding-top:@px1 / 75 * 1rem ;
    padding-right:@px2 / 75 * 1rem ;
    padding-bottom:@px3  / 75 * 1rem ;
    padding-left:@px4 / 75 * 1rem;
}
//左右外边距24 方法
.margin-l-r(@px1: 0,@px2: 0){
    margin-top:@px1 / 75 * 1rem ;
    margin-right:24 / 75 * 1rem ;
    margin-bottom:@px2  / 75 * 1rem ;
    margin-left:24 / 75 * 1rem;
}
//左右auto
.margin-a(@px1: 0,@px2: 0){
    margin-top:@px1 / 75 * 1rem;
    margin-right:auto;
    margin-bottom:@px2  / 75 * 1rem;
    margin-left:auto;
}
//字体行高一样
.set-font(agr,@font,@color:inherit){
    .px2px(font-size,@font);
    .px2px(line-height,@font);
    color:@color;
}
//行高和父级一样
.set-font(middle,@font,@line,@color:inherit){
    .px2px(font-size,@font);
    .px2rem(line-height,@line);
    color:@color;
}
//椭圆实心背景按钮  固定大小文字居中
.my-oval-btn(@w:100,@h:40,@f:16,@b:#077eee,@c:#ffffff){
    display: inline-block;
    .px2rem(width,@w);
    .px2rem(height,@h);
    background-color: @b;
    .px2rem(border-radius,@h/2);
    .px2px(font-size,@f);
    .px2rem(line-height,@h);
    color:@c;
    text-align: center;
}


//-------------------------公用less----------------------------
//超长截取出省略号
.my-ellipsis{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
//设置定位
.my-r-middle{
    position: absolute;
    top:50%;
    right:0;
    transform:translate(0,-50%);
}
.my-arr-middle{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}


